<template>
  <div style="width:100%;height:100%;"></div>
</template>

<script>
import starThree from './starThree.js'
export default {
  name: "starThree",
  components:{

  },
  data(){
    return {

    }
  },
  props:{
    motion:{
      default:()=> {
        return null
      }
    },
    type:{
      default:()=> {
        return 'element'
      }
    },
    threeProps:{
      default:()=> {
        return {}
      }
    },
  },
  mounted() {
    this.$nextTick(()=>{
      if(this.type==='element'){
        let three=starThree.create({...this.getConfig(),element:this.threeProps});
        three.setElementScene();
      }else{
        let three=starThree.create(this.lodash.merge(this.getConfig(),this.threeProps));
        three.setPageScene();
      }

    })
  },
  methods:{
    getConfig(){
      return {
        vm:this,
        el:this.$el,
        width:this.$el.clientWidth,
        height:this.$el.clientHeight,
        environment:{
          s:110,
          render:{
            clearColor:0xffffff,
            opacity:1
          },
          helper:{plane:false,camera:false,axes:true},
          point:[{x:-200,y:100,z:200,c:'#EAEAEF'}],
          ambient:{c:0x888888},
          camera:{type:'OrthographicCamera',x:-400,y:200,z:-200,n:1,f:1000},
        }
      }
    }
  }
}
</script>

<style scoped>

</style>